{extend name="index/base" /}
{block name='title'}User Favorites{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="MY FAVORITES" route="user/favorites"/}

    <div class="userBox">
        <div class="my-finds myFavorites">
            <ul class="proList clearfix" v-if="total>0">
                <li class="logsss_event_ps hurry-buy-goods" v-for="(item,index) in list" :key="index">
                    <p class="pr tc">
                        <a class=" pic " :href="'/products?id='+item.id" >
                            <img :src="item.cover_img" class="js_gdexp_lazy js-rendered"  style="display: block;">
                        </a>
                    </p>
                    <p class="pro_name common-check-box">
                        <a  :href="'/products?id='+item.id"  class="">{{item.name}}</a>
                    </p>
                    <p class="pro_price">
                        <strong class="my_shop_price fb js-shop-price color_tag">{$money_f} {{item.sold_price}}</strong>

                        <del class="my_shop_price">{$money_f} {{item.og_price}}</del>
                    </p>
                    <a href="javascript:;" class="js-fav-action-new fav_add_cart fb js_fav_add_cart js-quickview"  @click="handleAddCart(item)" rel="nofollow">Add To Bag</a>
                    <a class="fav_delete js_deteGoods " @click="handleDel(index,item)"><span></span></a>
                </li>

            </ul>
            <p class="text-center py-4"   v-else>You have no favorites yet.</p>
            <!-- Pagination-->
            <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
                <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>

            </nav>
        </div>
    </div>
</div>

{/block}
{block name='script'}


<script>

    layui.extend({

    }).use([], function () {
        initVue({
            data: {
                listQuery:{
                    limit: 15,
                    page:1,
                },
                list: [],
                total: 0,
                total_page: 0,
            },
            components: {
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {
                this._initData()
            },
            methods: {
                _initData:function(){
                    const that = this
                    this.$network('goods/collList',this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.list = data.list ||[]

                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },
                handleAddCart:function(item){
                    const that = this
                    this.$network('goods/cartAdd',{
                        goods_info:[{goods_id:item.id, sku_id:item.sku_id, num:1}],
                    }).then(function(res){
                        var data = res.data || {}
                        that.cart_num = data.num||0
                        that.$message.success(res.msg)
                    })
                },
                handleDel:function(index,item){
                    var that = this
                    this.$confirm("{:lang('tip_delete_data')}", '{:lang("tip")}',{
                        confirmButtonText: "{:lang('sure')}",
                        cancelButtonText: "{:lang('cancel')}",
                        type: 'warning'
                    }).then(function(){
                        that.$network('goods/collDel',{id:item.coll_id}).then(function(res){
                            that.list.splice(index,1)
                            that.$message.success(res.msg)
                        })
                    })
                }
            },
        })


    })

</script>

{/block}